<template>
  <div class="main">
    <div class="header">
      <!-- <div class="logo">
        <img src="~@/assets/logo.svg" class="logo" alt="logo" />
      </div> -->
      <p class="title">登录</p>
    </div>
    <a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
      <!-- 错误提示 -->
      <a-alert v-if="isLoginError" type="error" showIcon :message="loginErrorMsg" />
      <a-form-item label="账号">
        <a-input class="login-input" size="large" type="text" placeholder="请输入账号" v-decorator="[
          'username',
          { rules: [{ required: true, message: '您还没有输入账号' }], validateTrigger: 'change' }
        ]">
          <!-- <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" /> -->
          <template #suffix>
            <img src="~@/assets/clear.png" class="clear-icon hand" @click="clear" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item label="密码">
        <a-input class="login-input" size="large" :type="passwordType" autocomplete="false" placeholder="请输入用户密码"
          v-decorator="[
            'password',
            { rules: [{ required: true, message: '您还没有输入用户密码' }], validateTrigger: 'blur' }
          ]">
          <template #suffix>
            <img src="~@/assets/eyeB.png" @click="eyeClick" v-if="passwordType === 'password'" class="eye-icon hand" />
            <img src="~@/assets/eye.png" v-else @click="eyeClick" class="eye-icon hand" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item style="margin-top:24px">
        <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="state.loginBtn"
          :disabled="state.loginBtn">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'

export default {
  data() {
    return {
      // 是否登录错误
      isLoginError: false,
      // 登录错误的信息
      loginErrorMsg: '登录失败',
      // 表单组件
      form: this.$form.createForm(this),
      // 页面状态
      state: { loginBtn: false },
      passwordType: 'password'
    }
  },
  created() { },
  methods: {
    ...mapActions(['Login']),
    // 表单提交: 确定登录
    handleSubmit(e) {
      e.preventDefault()
      const {
        form: { validateFields },
        state,
        Login
      } = this

      state.loginBtn = true

      // 表单验证
      validateFields(['username', 'password'], { force: true }, (err, values) => {
        if (!err) {
          const loginParams = { ...values }
          Login(loginParams)
            .then(res => this.loginSuccess(res))
            .catch(err => this.loginFailed(err))
            .finally(() => state.loginBtn = false)
        } else {
          setTimeout(() => state.loginBtn = false, 100)
        }
      })
    },

    clear() {
      this.form.setFieldsValue({
        username: null
      });
    },

    eyeClick() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    },

    // 登录成功
    loginSuccess(res) {
      this.isLoginError = false
      // 显示提示信息
      this.$message.success(res.message, 1.5)
      setTimeout(() => {
        if (res.data.is_super == 0) {
          // 商品页
          this.$router.push({ path: '/goods/index' })
        } else {
          // 跳转到后台首页
          this.$router.push({ path: '/' })
        }
        // 显示欢迎信息
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
    },

    // 登录请求失败
    loginFailed(response) {
      this.isLoginError = true
      this.loginErrorMsg = response.message
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  margin-bottom: 35px;
  text-align: center;

  .logo {
    height: 56px;
    vertical-align: top;
    border-style: none;
    margin-bottom: 20px;
  }

  .title {
    font-size: 24px;
    color: #202020;
    position: relative;
    margin: 0;
  }
}

.main {
  width: 483px;
  height: 510px;
  border-radius: 35px;
  display: flex;
  flex-direction: column;
  align-content: center;
  margin: auto 0 !important;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25%;
  padding: 0 38px !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.user-layout-login {

  label {
    font-size: @font-size-base;
  }

  /deep/.ant-input-lg {
    width: 100%;
    height: 52px;
    border-radius: 13px;
  }

  /deep/.login-input .ant-input {
    border: none;
    background: #fff;
    font-size: @font-size-base;
    border: 1px solid #DCDBDD;
  }

  /deep/.ant-form-explain {
    margin-top: 9px;
    color: rgba(0, 0, 0, 0.45);
  }

  /deep/.ant-input:hover {
    border-color: #5463FF;
  }

  /deep/.ant-form-item-required::before {
    content: '' !important;
  }

  .login-input:hover {
    .clear-icon {
      display: block;
    }
  }

  .clear-icon {
    width: 25px;
    height: auto;
    display: none;
  }

  .eye-icon {
    width: 27px;
    height: auto;
  }

  .login-button {
    height: 52px;
    font-size: 16px;
    width: 100%;
    margin-top: 20px;
    border-radius: 13px;
    background: #5463FF;
    border: none;
  }

  .ant-alert-error {
    margin-bottom: 24px;
    background-color: #fffbfb;
  }
}
</style>
